<script setup lang="ts">
import { BannerItem } from "@/types/data";
import {  ref } from "vue";
const { bannerList } = defineProps<{
  bannerList: BannerItem[];
}>();
const i = ref(0);
const hPrev = () => {
  if (i.value > bannerList.length - 1) {
    i.value = 0;
  } else if (i.value <= 0) {
    i.value = bannerList.length - 1;
  } else {
    i.value--;
  }
};
const hNext = () => {
  if (i.value >= bannerList.length - 1) {
    i.value = 0;
  } else {
    i.value++;
  }
};
let timer = -1;

const start = () => {
  timer = window.setInterval(() => {
    hNext();
  }, 1000);
};
const stop = () => {
  clearInterval(timer);
};
</script>

<template>
  <div>
    <div class="box" @mouseenter="stop" @mouseleave="start">
      <ul>
        <li
          class="img-item"
          :class="{ fade: i === index }"
          v-for="(item, index) in bannerList"
        >
          <img :src="item.imgUrl" alt="" />
        </li>
      </ul>
      <div class="nav">
        <div class="top">
          <a @click="hPrev" href="javascript:;" class="carousel-btn prev"
            ><i class="iconfont icon-angle-left"></i
          ></a>
          <a @click="hNext" href="javascript:;" class="carousel-btn next"
            ><i class="iconfont icon-angle-right"></i
          ></a>
        </div>
        <div class="bottom">
          <span v-for="item,index in bannerList" :key="index" :class="{active:i===index}"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>

.box{
  margin-top: 20px;
  margin-left: 150px;
}
.box li {
  position: absolute;
}
.nav {
  position: absolute;
  .bottom{
    .active{
      background-color:#fff;
    }
    span{
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: rgba(238, 238, 238, 0.708);
      margin-left: 5px;
      border-radius: 50%;
    }
    // background: skyblue;
    margin-top: 220px;
    text-align: center;
  }
  .top {
    margin-top: 200px;
  }
  a.prev {
    margin-left: 100px;
  }
  a.next {
    margin-left: 1050px;
  }
}
.img-item {
  opacity: 0;
}
.fade {
  opacity: 1;
}
</style>
